{extend name="common/base" /}
{block name="style"}

<style type="text/css">
    .upload-img{
        position: relative;
        /*        width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                float: right;*/
        /*margin-right: 0.2rem;*/

    }
    .upload-img input{
        position: absolute;
        /*right: 0.2rem;*/
        top: 8%;
        width:100%;
        height: 0.785rem;
        opacity: 0;
    }
</style>
{/block}
{block name="body"}
<link rel="stylesheet" href="__CDN__/html/css/LArea.css">
<link rel="stylesheet" type="text/css" href="__CDN__/html/css/mui.picker.min.css" />
<link href="__CDN__/html/css/mui.poppicker.css" rel="stylesheet" />
<div class="soye-hui">
    <form method="post" id="auth-form" enctype="multipart/form-data" action=""> 
        <div class="rzxx-mains">
            <input type="hidden" name="car_id" class="js-car-id-val"  value="{$user_car.car_id}">
            <ul class="rzxx-nav">
                <li id='brandPicker'>
                    <div class="nav-zuo">品牌</div>
                    <input type="text"  class="nav-sele js-brand" placeholder="请选择品牌" readonly="readonly" value="{$user_car.brand_name}">
                    <input type="hidden" name="car_brand_id" class="js-brand-val" value="{$user_car.car_brand_id}">
                </li>
                <li id='typePicker'>
                    <div class="nav-zuo">车型</div>
                    <input type="text"  class="nav-sele js-type" placeholder="请选择车型" readonly="readonly" value="{$user_car.type_name}">
                    <input type="hidden" name="car_type_id" class="js-type-val" value="{$user_car.car_color_id}">
                </li>  
                <li id='colorPicker'>
                    <div class="nav-zuo" style="width: 20%">车身颜色</div>
                    <input type="text"  class="nav-sele js-color" placeholder="请选择车身颜色" readonly="readonly"  style="width: 75%" value="{$user_car.color_name}">
                    <input type="hidden" name="car_color_id" class="js-color-val" value="{$user_car.car_type_id}">
                </li>    
                <li>
                    <div class="nav-zuo">居住地</div>
                    <input type="text" id="city" name="city_name" placeholder="请选择省/市/区" readonly="readonly" class="nav-sele" value="{$user_car.juzhudi}">
                    <input id="value1" name="js_city" class="js-city" type="hidden" value="{$user_car.js_city}">
                </li> 
                <li class="z-li">
                    <div class="nav-zuo">备注</div>
                    <textarea class="z-terea" name="remark" placeholder="若车辆不属于本人，请注明和车主关系">{$user_car.remark}</textarea>
                </li>                         
            </ul>

            <div class="xsz-list">
                <h2 class="xsz-h2">行驶证</h2>
                <ul class="xsz-nav">
                    <li class="upload-img">
                        <div class="xsz-shang"><img src="__CDN__{$user_car['driving_license_img'][0]}" <?php if(empty($user_car['driving_license_img'][0])):?> style="display:none;"<?php endif;?> class="driving_license_img1" width="100%" height="100%">点击上传</div>
                        <input type="hidden" name="driving_license_img1" class="driving_img1" value="{$user_car['driving_license_img'][0]}">
                        <div class="xsz-ps">行驶证正面照</div>
                        <input type="file" name="driving_license" id="driving_license_img1">
                    </li>
                    <li class="li1 upload-img">
                        <div class="xsz-shang"><img src="__CDN__{$user_car['driving_license_img'][1]}"<?php if(empty($user_car['driving_license_img'][0])):?>  style="display:none;"<?php endif;?> class="driving_license_img2" width="100%" height="100%">点击上传</div>
                        <input type="hidden" name="driving_license_img2" class="driving_img2" value="{$user_car['driving_license_img'][1]}">
                        <div class="xsz-ps">行驶证背面照</div>
                        <input type="file" name="driving_license" id="driving_license_img2">
                    </li>
                </ul>
            </div>
        </div>
        <!--<input type="hidden" id="brand-list" value="" >-->
        <button type="button" class="dw-aiy" id="save" style="line-height:0;">提交审核</button>
    </form>
</div>
{/block}
{block name="menu"}
{/block}
{block name="script"}
<script src="__CDN__/html/js/mui.picker.min.js"></script>
<script src="__CDN__/html/js/mui.poppicker.js"></script>
<script src="__CDN__/html/js/LAreaData1.js"></script>
<script src="__CDN__/html/js/LAreaData2.js"></script>
<script src="__CDN__/html/js/LArea.js"></script>
<script>

    //-----------------------------------------
    //选择品牌

    var brandPicker = new mui.PopPicker();
    brandPicker.setData({$brand_list});

    document.querySelector('#brandPicker').addEventListener('tap', function (event) {
        brandPicker.show(function (items) {
            $('.js-brand').val(items[0].text);
            $('.js-brand-val').val(items[0].value);

        });
    }, false);

    //-----------------------------------------
    //选择车型

    var typePicker = new mui.PopPicker();
    typePicker.setData({$type_list});

    document.querySelector('#typePicker').addEventListener('tap', function (event) {
        typePicker.show(function (items) {
            $('.js-type').val(items[0].text);
            $('.js-type-val').val(items[0].value);

        });
    }, false);

    //-----------------------------------------
    //选择颜色

    var colorPicker = new mui.PopPicker();
    colorPicker.setData({$color_list});

    document.querySelector('#colorPicker').addEventListener('tap', function (event) {
        colorPicker.show(function (items) {
            $('.js-color').val(items[0].text);
            $('.js-color-val').val(items[0].value);

        });
    }, false);

    var area1 = new LArea();
    area1.init({
        'trigger': '#city', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
        'valueTo': '#value1', //选择完毕后id属性输出到该位置
        'keys': {
            id: 'id',
            name: 'name'
        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
        'type': 1, //数据源类型
        'data': LAreaData //数据源
    });

    $("#driving_license_img1").change(function () {
        readURL(this, 'driving_license_img1', 'driving_img1');
    });

    $("#driving_license_img2").change(function () {
        readURL(this, 'driving_license_img2', 'driving_img2');
    });

    $('#save').on('click', function () {
        var flag = 1;
        var err = '';
        if (!$(".js-brand-val").val()) {
            err = '请选择汽车品牌';
            flag = 0;
        }
        if (!$(".js-type-val").val()) {
            err = '请选择车型';
            flag = 0;
        }
        if (!$(".js-color-val").val()) {
            err = '请选择车身颜色';
            flag = 0;
        }
        if (!$(".js-city").val()) {
            err = '请选择居住地';
            flag = 0;
        }

        if (!$(".driving_img1").val()) {
            err = '请上传行驶证正面';
            flag = 0;
        }
        
        if (!$(".driving_img2").val()) {
            err = '请上传行驶证背面';
            flag = 0;
        }


        if (flag) {
            $("#auth-form").submit();

        } else {
            mui.alert(err);

        }
    });

    function readURL(input, name, img) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.' + name).attr('src', e.target.result);

            };
            reader.readAsDataURL(input.files[0]);

            var formData = new FormData();
            var img_file = input;

            var fileobj = img_file.files[0];
            formData.append("file", fileobj);

            $.ajax({
                url: "{:url('Pub/upload')}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    $('.' + name).show();
                    $('.' + img).val(data.data.url);
//                    $.post("{:url('My/setuserinfo')}", {avatar: data.data.url}, function (res) {
//                        if (res.code == '0') {
//                            mui.toast(res.msg);
//                        }
//                    }, 'json');
                },
                error: function () {
                    alert("上传失败！");
                }
            });


        }
    }
</script>   
{/block}